<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7_ng-repeat结合style的使用</title>
    <script src="./lib/angularjs.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <!-- 在style里面，$first表示选择第一个元素，$last表示选择最后一个元素，$middle表示选择除第一个和最后一个外的所有中间元素，$even表示选择偶数行元素，$odd表示选择奇数行元素 -->
    <ul>
        <li ng-repeat="anime in arrData" style="{{$first || $last ? 'color: red; background: green' : ''}}">{{anime}}
        </li>
    </ul>
    <ul>
        <li ng-repeat="anime in arrData" style="{{$middle ? 'color: red; background: green' : ''}}">{{anime}}
        </li>
    </ul>
    <ul>
        <li ng-repeat="(key, value) in objData" style="{{$even ? 'color: pink' : $odd ? 'color: green' : ''}}">
            <span>{{value.name}}：{{value.num}}</span>
        </li>
    </ul>
    <!-- ng-repeat默认会拿value当唯一值，当遇到重复的数据时会报错，此时需要告诉ng，让它拿index作为唯一值来使用，需要在里面添加track by $index的声明内容。 -->
    <ul>
        <li ng-repeat="v in repeatData track by $index">{{v}}
        </li>
    </ul>
</body>

<script>
    const myApp = angular.module("myApp", [])
    myApp.controller("myCtrl", ["$scope", function ($scope) {
        $scope.arrData = ["guangzhou", "shenzhen", "shanghai"]
        $scope.objData = [{ name: "海贼王", num: 999 }, { name: "妖精的尾巴", num: 288 }, { name: "火影忍者", num: 722 }]
        $scope.repeatData = ["海贼王", "妖精的尾巴", "火影忍者", "中国惊奇先生", "中国惊奇先生"]
    }])
</script>

</html>